<template>
  <div>
    <tabbar></tabbar>

    <div class="main">
      <div class="content" v-if="moneyData">

        <div class="statistics">
          微志益平台项目统计
          截止-<span class="time">2020</span>
          筹款中项目:
          <span class="todo">1256</span>个
          执行中项目:
          <span class="doing">141</span>个
          已完成:
          <span class="finish">1451</span>个
        </div>

        <div class="classBox" v-for="(item) in moneyData.contribution" :key="item._id">
          <div class="title">
            <!-- 栏目 -->
            {{item.name}}
            <span>更多</span>
          </div>
          <ul>
            <li v-for="data in item.data" :key="data._id">
              <p class="name" >{{data.name}}</p>
              <div class="imgBox">
                <img :src="data.image" alt="" :id="data._id" @click="toDetail">
              </div>
              <div class="txtBox">
                <p class="personNum">捐款人次：{{data.personNum}}</p>
                <p class="moneyNum">已筹集：<span>{{data.moneyNum}}</span>元</p>
                <button  @click="showPopup">我要捐款</button>
              </div>
              
             
            </li>

              <van-popup v-model="show" :overlay="false" :lock-scroll='false' closeable round>
                  <div class="show">
                    <div class="ipt">请输入您的捐款金额：
                      <input type="text" name="" id="">
                      （元）
                    </div>
                    <div class="ewm" >
                      <img src="/images/ewm2.png" alt="支付二维码">
                    </div>
                    <p class="ms">微信扫描上方二维码进行捐款</p>
                  </div>
                </van-popup>
          </ul>
        </div>

        <div class="fb">
          <h3 class="tit">发起项目</h3>
          <div class="fbMain">
            <div class="left">
              <div class="stepsBox">
                <p class="stepTit">
                  <span>❤</span>
                  项目流程图
                </p>
                <ul>
                  <li v-for="item in moneyData.steps.steps" :key="item.id">
                    <div class="index">{{item.id}}</div>
                    <div class="cz">{{item.cz}}</div>
                    <div class="ms">{{item.ms}}</div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="right">
              <div class="imgBox"><img src="../assets/500.jpg"></div>
              <div class="fbBtn" @click="toStartmoney">
                我要发起
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

    <end></end>
  </div>
</template>
<script>
import Vue from 'vue';
import { Popup } from 'vant';
import axios from 'axios'
import {getMoney} from '../api/Money'
Vue.use(Popup);
export default {
  data () {
    return {
      moneyData: {steps:[],contribution:{}},
      show: false,
      flag: 1
    }
  },
  mounted () {
    getMoney().then( res => {
      this.moneyData.contribution =  res.data
      // console.log(this.moneyData);
    })
    axios.get('/data/money.json').then(res=>{
       this.moneyData.steps = res.data
      // console.log(this.moneyData);
    })
   
  },
  methods: {
    toStartmoney () {
      this.$router.push('/startvolunteer')
    },
    toDetail (event) {
      let id = event.target.id
      this.$router.push(`/moneydetail/id=${id}`)
    },
    showPopup () {
      console.log(666);
      this.show = true;
      // this.flag = i
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  .content {
    width: 1200px;
    margin: auto;

    .statistics {
      width: 1000px;
      height: 50px;
      background: #f4f4f2;
      margin: auto;
      line-height: 50px;
      padding-left: 20px;
      font-size: 16px;
      border-radius: 4px;
      margin-top: 20px;
      border: 1px #dfdfdf solid;
      span {
        color: #83a90d;
        font-size: 18px;
        cursor: pointer;
      }
      span:hover {
        text-decoration: underline;
      }
    }

    .classBox {
      width: 100%;
      margin-top: 40px;
      margin-bottom: 25px;

      .title {
        background: hsl(19, 100%, 58%);
        font-size: 20px;
        padding-left: 26px;
        padding: 10px 26px;
        color: wheat;
        span {
          color: wheat;
          float: right;
          font-size: 14px;
          cursor: pointer;
        }
        :hover {
          color: red;
          text-decoration: underline;
        }
      }
      ul {
        display: flex;
        justify-content: space-around;
        li {
          margin-top: 50px;
          width: 20%;
          p{
            margin-left:20px;
            margin-bottom:10px;
          }
          .imgBox {
            width: 200px;
            height: 120px;
            margin: auto;
            margin-bottom: 5px;
            overflow: hidden;
            img {
              width: 100%;
              cursor: pointer;
            }
          }
          .txtBox {
            //  border-top: none;
            padding-top: 80px;
            margin-top: -80px;
            p {
              margin-top: 5px;
              padding-left: 20px;
              font-size: 12px;
            }
            .name {
              width: 16px;
              background: #716457;
              font-size: 16px;
              transition: all 0.3s;
            }
            .name:hover {
              transform: scale(1.1) translateX(5px);
              color: #83a90d;
            }
            .personNum {
              color: #afafaf;
            }
            .moneyNum {
              color: #afafaf;
              span {
                color: red;
              }
            }
            button {
              color: #716457;
              border: none;
              width: 200px;
              display: block;
              margin: 10px 20px;
              cursor: pointer;
              padding: 5px 10px;
              border-radius: 5px;
              background: white;
              border: 1px solid #716457;
            }
          }
          
        }
      }
    }
     .show {
            width: 500px;
            height: 380px;
            box-sizing: border-box;
            padding: 40px 20px;
            .ipt {
              margin-top: 20px;
              color: green;
              text-align: center;
              input {
                border-radius: 10px;
                box-sizing: border-box;
                padding-left: 15px;
                width: 150px;
              }
            }
            .ewm {
              width: 160px;
              margin: 30px auto;
              overflow: hidden;
              img {
                width: 100%;
              }
            }
            .ms {
              text-align: center;
              color: red;
            }
          }
          overlay-style{
             opacity: 0.5;
          }

    .fb {
      margin-top: 20px;
      border-top: 1px solid #c5c5c5;
      padding-top: 50px;
      .tit {
        color: #716457;
        font-size: 40px;
      }
      .fbMain {
        display: flex;
        margin-top: 30px;
        .left {
          margin-left: 200px;
          // border: 1px solid;
          .stepsBox {
            width: 300px;
            .stepTit {
              color: #333;
              font-size: 20px;
              span {
                color: red;
              }
            }
            ul {
              margin-bottom: 20px;
              li {
                display: flex;
                background: #f4f4f2;
                margin-top: 20px;
                font-size: 14px;
                position: relative;
                cursor: pointer;
                div {
                  padding: 5px;
                }
                .index {
                  width: 20px;
                  background: #716457;
                  height: 100%;
                  text-align: center;
                  color: #fff;
                  opacity: 0.5;
                }
                .cz {
                  color: #716457;
                  margin-left: 5px;
                  font-weight: bold;
                }
                .ms {
                  color: #9b9b9b;
                  margin-left: 8px;
                }
              }
              li:hover {
                background: white;
                .index {
                  opacity: 1;
                }
                .cz {
                  color: #716457;
                }
                .ms {
                  color: #000;
                }
              }
            }
          }
        }
        .right {
          margin-bottom: 50px;
          margin-left: 180px;
          width: 680px;
          display: flex;
          justify-content: space-around;
          .fbBtn {
            width: 400px;
            height: 80px;
            background: #91c03e;

            text-align: center;
            line-height: 80px;
            font-size: 18px;
            cursor: pointer;
            color: #666666;
            transition: all 0.4s;
            opacity: 0.8;
            margin-top: 307px;
            margin-left: -497px;
          }
          .fbBtn:hover {
            //  animation: fbAni 4s linear infinite;
            opacity: 1;
          }
          @keyframes fbAni {
          }
          .imgBox {
            border: 1px solid #716457;
            padding: 20px;
            width: 400px;
            height: 360px;
            overflow: hidden;

            margin-left: 20px;
            img {
              width: 100%;
            }
          }
        }
      }
    }
  }
}
</style>